<template>
	<div class="start" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.3)">
		<div class="title">启动调度</div>
		<div class="flex flex-col items-center mt-[100px]">
			<div class="content">
				<p class="mb-4">调度内容</p>
				<el-input v-model="content" style="width: 1065px" :autosize="{ minRows: 8 }" type="textarea" placeholder="请输入调度内容" />
			</div>
			<div class="select mt-6">
				<p class="mb-4">调度领导</p>
				<!-- <el-cascader v-model="value" :options="options" style="width: 1065px" :props="props" clearable /> -->
				<el-select v-model="value" multiple style="width: 1065px" placeholder="请选择" clearable>
					<el-option v-for="item in useIllegal.deptList" :key="item.value" :label="item.label" :value="item" class="custom-option" />
				</el-select>
			</div>
			<div class="mt-20 flex">
				<div class="btn" @click="handleConfirm">确认调度</div>
				<div class="cancel" @click="cancelBtn">取消</div>
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { getDeptList, initDispatch } from '@/api/illegal'
import { useIllegalStore } from '@/store/modules/illegal'
const useIllegal = useIllegalStore()
const value = ref([])
const loading = ref(false)
const form = reactive({
	content: '',
	dispatchOrg: [],
	dispatchOrgName: [],
})
const content = ref('')
const emit = defineEmits(['handleCancel'])
const props = { multiple: true }

// const options = [
// 	{
// 		value: 1,
// 		label: 'Asia',
// 		children: [
// 			{
// 				value: 2,
// 				label: 'China',
// 				children: [
// 					{ value: 3, label: 'Beijing' },
// 					{ value: 4, label: 'Shanghai' },
// 					{ value: 5, label: 'Hangzhou' },
// 				],
// 			},
// 			{
// 				value: 6,
// 				label: 'Japan',
// 				children: [
// 					{ value: 7, label: 'Tokyo' },
// 					{ value: 8, label: 'Osaka' },
// 					{ value: 9, label: 'Kyoto' },
// 				],
// 			},
// 			{
// 				value: 10,
// 				label: 'Korea',
// 				children: [
// 					{ value: 11, label: 'Seoul' },
// 					{ value: 12, label: 'Busan' },
// 					{ value: 13, label: 'Taegu' },
// 				],
// 			},
// 		],
// 	},
// 	{
// 		value: 14,
// 		label: 'Europe',
// 		children: [
// 			{
// 				value: 15,
// 				label: 'France',
// 				children: [
// 					{ value: 16, label: 'Paris' },
// 					{ value: 17, label: 'Marseille' },
// 					{ value: 18, label: 'Lyon' },
// 				],
// 			},
// 			{
// 				value: 19,
// 				label: 'UK',
// 				children: [
// 					{ value: 20, label: 'London' },
// 					{ value: 21, label: 'Birmingham' },
// 					{ value: 22, label: 'Manchester' },
// 				],
// 			},
// 		],
// 	},
// 	{
// 		value: 23,
// 		label: 'North America',
// 		children: [
// 			{
// 				value: 24,
// 				label: 'US',
// 				children: [
// 					{ value: 25, label: 'New York' },
// 					{ value: 26, label: 'Los Angeles' },
// 					{ value: 27, label: 'Washington' },
// 				],
// 			},
// 			{
// 				value: 28,
// 				label: 'Canada',
// 				children: [
// 					{ value: 29, label: 'Toronto' },
// 					{ value: 30, label: 'Montreal' },
// 					{ value: 31, label: 'Ottawa' },
// 				],
// 			},
// 		],
// 	},
// ]
const reset = () => {
	form.content = ''
	form.dispatchOrg = []
	form.dispatchOrgName = []
}
const handleConfirm = () => {
	reset()
	// console.log('confirm', value.value)
	if (!value.value.length) {
		ElMessage.error('请选择调度领导！')
		return
	} else if (!content.value) {
		ElMessage.error('请输入内容！')
		return
	} else {
		loading.value = true
		form.content = content.value
		value.value.forEach((item) => {
			form.dispatchOrg.push(item.value)
			form.dispatchOrgName.push(item.label)
		})
		// console.log('confirm', form)
		initDispatch(form)
			.then((res) => {
				// console.log('test', res)
				ElMessage.success('发起调度成功！')
				cancelBtn()
				loading.value = false
			})
			.catch((err) => {
				ElMessage.error(err)
				loading.value = false
			})
	}
}
const cancelBtn = () => {
	reset()
	content.value = ''
	value.value = []
	emit('handleCancel')
}
// const options = reactive([])
onMounted(() => {
	// loading.value = true
})
</script>
<style lang="scss" scoped>
.start {
	@include frame;
	color: white;
	font-size: 24px;
	overflow: scroll;
}
:deep(.el-textarea__inner) {
	background: transparent;
	font-size: 24px;
	color: white;
}
:deep(.el-input__wrapper) {
	background: transparent;
	font-size: 24px;
	color: white;
	// height: 60px;
	min-height: 58px;
}
:deep(.el-tag__content) {
	font-size: 24px;
}
// :deep(.el-cascader__tags .el-tag) {
// 	height: 30px;
// }
.btn {
	width: 156px;
	height: 58px;
	background-color: rgba(19, 94, 180, 1);
	border-radius: 6px;
	text-align: center;
	line-height: 58px;
	font-size: 24px;
	margin-right: 15px;
	cursor: pointer;
}
.btn:hover {
	background-color: rgba(19, 94, 180, 0.7);
}
.cancel {
	@extend .btn;
	background: rgba(11, 50, 90, 1);
}
.cancel:hover {
	background: rgba(11, 50, 90, 0.7);
}
:deep(.el-select__wrapper) {
	background-color: transparent;
}
.custom-option {
	font-size: 24px;
}
:deep(.el-select__placeholder) {
	font-size: 24px;
}
</style>
<style lang="scss">
// .el-cascader-node__label {
// 	font-size: 24px;
// }
</style>
